<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 清楚浏览器默认格式 */
        * {
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
            /* 防止撑大盒子 */
        }

        /* 1. 设置第一行输入框与按钮 */
        .nav {
            width: 800px;
            height: 200px;

            /* 页面居中 */
            margin: 0 auto;

            /* 进入弹性布局，div中的子元素垂直居中 */
            display: flex;
            align-items: center;
        }

        .nav input {
            width: 600px;
            height: 60px;
            border-radius: 5px;
        }

        .nav button {
            width: 300px;
            height: 60px;
            background-color: orange;
            color: white;
            font-size: 20px;
            border-radius: 5px;
            border-color: orange;
        }

        /* 2. 设置第二行的样式 */
        .container {
            width: 800px;

            /* 弹性布局可以让两个div设置在一行 */
            display: flex;
            margin: 0px auto;
        }

        h3 {
            width: 400px;
            height: 60px;
            background-color: rgb(33, 33, 33);
            color: white;
            text-align: center;

            padding-top: 15px;
        }

        .row{
            width: 400px;

            display: flex;
            align-items: center;
        }

        span{
            width: 200px;
            height: 40px;
            font-size: 20px;
            margin-left: 5px;

            padding-top: 5px;
        }

        .row button{
            width: 90px;
            height: 40px;
            font-size: 20px;
            margin-top: 10px;
        }

        /* 点击 新建任务 */
        .nav button:active{
            background-color: gray;            
        }
        
    </style>
</head>

<body>
    <div class="nav">
        <input type="text"><button onclick="newJob()">新建任务</button>
    </div>

    <div class="container">
        <div class="todo">
            <h3>未完成</h3>

            <div class="row">
                <input type="checkbox">
                <span>吃饭</span>
                <button>删除</button>
            </div>

            <div class="row">
                <input type="checkbox">
                <span>睡觉</span>
                <button>删除</button>
            </div>

        </div>
        <div class="done">
            <h3>已完成</h3>
        </div>
    </div>
</body>

<script>
    function newJob(){
        // 1. 获取 新建任务 文本框中的信息
        let input=document.querySelector(".nav input");
        let message=input.value;
        console.log(message);
        if(message==''){
            alert("任务为空，新建失败");
            return;
        }
        // 2. 获取 todo 的这个div
        let todo=document.querySelector('.todo');
        // 3. 新建一个 newdiv
        let newdiv=document.createElement('div');
        // 4. 新建一个 checkbox
        let checkbox=document.createElement('input')
        checkbox.type='checkbox';
        // 5. 新建一个 span
        let span=document.createElement('span');
        span.innerHTML=message;
        // 6. 新建一个 button 删除按钮
        let button=document.createElement('button');
        button.innerHTML="删除";
        // 7. 将新建的 checkbox span button 都插入到newdiv中
        newdiv.appendChild(checkbox);
        newdiv.appendChild(span);
        newdiv.appendChild(button);
        // 8. 更新样式 和 row类 一样
        newdiv.className="row";
        // 9. 插入到 todo 之中
        todo.appendChild(newdiv);


        // 删除按钮点击事件
        let delete_button=document.querySelectorAll('.row button');
        // 给每一个删除节点绑定上点击事件
        for(let i=0;i<delete_button.length;i++){
            delete_button[i].onclick=function(){
                // 先找到当前 删除按钮 节点的父亲节点
                let parent=this.parentNode;// .row

                // 之后在获取爷爷节点
                let grandfather=parent.parentNode;

                // 删除 parent
                grandfather.removeChild(parent);

            }
        }
        

        // 给 checkbox 添加点击事件
        // 点击 checkbox 的元素则就将把他加入到 已完成的列表中
        let checkbox_button=document.querySelectorAll('.row input');
        for(let i=0;i<checkbox_button.length;i++){
            checkbox_button[i].onclick=function(){
                // 获取父亲节点，找到和checkbox同一div下的span
                let row=this.parentNode;// 所要插入的元素节点

                // target 代表的是将row插入到哪一个div
                // 如果 复选框 被选中，则就将 row 插入到 已完成 的列表下面
                // 否则就是插入到 未完成 的列表下面
                let target;
                console.log(this.checked);
                if(this.checked){
                    target=document.querySelector('.done');
                }
                else{
                    target=document.querySelector('.todo');
                }

                // 进行插入
                target.appendChild(row);
            }
        }
    }

</script>

</html>